<!DOCTYPE HTML>
<html>
<head>
	<title>RFTennis | 购物车</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="./css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link href="./css/form.css" rel="stylesheet" type="text/css" media="all" />
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/reset.css">
  	<link rel="stylesheet" href="css/carts.css">
	<script type="text/javascript" src="./jquery/jquery.min.js"></script>
	<script src="./jquery/jquery.easydropdown.js"></script>
	<script type="text/javascript" src="./jquery/jquery.simplePagination.js" ></script> <!-- 换页js -->
	<script type="text/javascript">
		$(document).ready(function() {
			$(".dropdown img.flag").addClass("flagvisibility");

			$(".dropdown dt a").click(function() {
				$(".dropdown dd ul").toggle();
			});

			$(".dropdown dd ul li a").click(function() {
				var text = $(this).html();
				$(".dropdown dt a span").html(text);
				$(".dropdown dd ul").hide();
				$("#result").html("Selected value is: " + getSelectedValue("sample"));
			});

			function getSelectedValue(id) {
				return $("#" + id).find("dt a span.value").html();
			}

			$(document).bind('click', function(e) {
				var $clicked = $(e.target);
				if (! $clicked.parents().hasClass("dropdown"))
					$(".dropdown dd ul").hide();
			});


			$("#flagSwitcher").click(function() {
				$(".dropdown img.flag").toggleClass("flagvisibility");
			});
		});
			 /*换页 */
		$(function(){

		    $("#paging1").pagination({

		        items: 100,

		        itemsOnPage: 10,

		        cssStyle: 'light-theme'

		    });

		});
	</script>
	<!-- start menu -->     
	<link href="./css/megamenu.css" rel="stylesheet" type="text/css" media="all" />
	<script type="text/javascript" src="./js/megamenu.js"></script>
	<script>$(document).ready(function(){$(".megamenu").megamenu();});</script>
	<!-- end menu -->
	<script type="text/javascript" src="./jquery/jquery.jscrollpane.min.js"></script>
	<script type="text/javascript" id="sourcecode">
		$(function()
		{
			$('.scroll-pane').jScrollPane();
		});
	</script>
	<!-- top scrolling -->
	<script type="text/javascript" src="./js/move-top.js"></script>
	<script type="text/javascript" src="./js/easing.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
			});
		});
	</script>		
</head>
<body>
	<div class="header-top">
		<div class="wrap"> 
			<div class="logo">
				<a href="index.html"><img src="./images/logo.png" alt=""/></a>
			</div>
			<div class="cssmenu">
				<ul>
					<li class="active"><a href="logo.html">登录/注册</a></li> 
					<li><a href="">订单管理</a></li> 
					<li><a href="shoppingcart.html">购物车</a></li> 
					<li><a href="">个人中心</a></li> 
				</ul>
			</div>

			<div class="clear"></div>
		</div>
	</div>
	<div class="header-bottom">
		<div class="wrap">
			<!-- start header menu -->
			<ul class="megamenu skyblue">
				<li><a class="color1" href="#">首页</a></li>
				<li class="grid"><a class="color2" href="#">网球</a>
				
			</li>
			<li class="active grid"><a class="color4" href="#">网球拍</a>
				
			</li>				
			<li><a class="color5" href="#">网球服装</a>
				
			</li>
			<li><a class="color6" href="#">网球配件</a>
				
			</li>
			<div class="h_search">
				<form>
					<input type="text" value="">
					<input type="submit" value="">
				</form>
			</div>
		</ul>			<div class="clear"></div>
		</div>
	</div>
	<div class="login">
		<div class="wrap">
			<div class="cont span_2_of_3" style="width: 100%;">
				<div class="mens-toolbar">
    						<div class="cartMain_hd">
    							<ul class="order_lists cartTop">
    								<li class="list_chk">

    									<input type="checkbox" id="all" class="whole_check">
    									<label for="all"></label>
    									全选
    								</li>
    								<li class="list_con">商品信息</li>
    								<li class="list_info">商品参数</li>
    								<li class="list_price">单价</li>
    								<li class="list_amount">数量</li>
    								<li class="list_sum">金额</li>
    								<li class="list_op">操作</li>
    							</ul>
    						</div>
    					</div>

    					<div class="data">
    						<div class="cartBox">
    							<div class="shop_info">
    								
    							</div>
    							<div class="order_content">
    								<ul v-for="(row,i) in resp.data.rows">
    									<li class="list_chk">
    										<input type="checkbox" id="checkbox_2" class="son_check">
    										<label for="checkbox_2"></label>
    									</li>
    									<li class="list_con">
    										<div class="list_img"><a href="javascript:;"><img src="./images/pic7.jpg" alt=""></a></div>
    										<div class="list_text"><a href="javascript:;">{{row.productId}}</a></div>
    									</li>
    									<li class="list_info">
    										<div class="list_text">{{row.productPropertyId}}</div>
    									</li>
    									<li class="list_price">
    										<p class="price">{{row.price}}</p>
    									</li>
    									<li class="list_amount">
    										<div class="amount_box">
    											<a href="javascript:;" class="reduce reSty">-</a>
    											<input type="text" value="1" class="sum">
    											<a href="javascript:;" class="plus">+</a>
    										</div>
    									</li>
    									<li class="list_sum">
    										<p class="sum_price">{{row.price}}</p>
    									</li>
    									<li class="list_op">
    										<p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
    									</li>
    								</ul>
    								
    							</div>
    						</div>

    							<div class="bar-wrapper">
    								<div class="bar-right">
    									<div class="piece">已选商品<strong class="piece_num">0</strong>件</div>
    									<div class="totalMoney">共计: <strong class="total_text">0.00</strong></div>
    									<div class="calBtn"><button id="settlement">结算</button></div>
    								</div>
    							</div>
    						</section>
    						<section class="model_bg"></section>
    						<section class="my_model">
    							<p class="title">删除宝贝<span class="closeModel">X</span></p>
    							<p>您确认要删除该宝贝吗？</p>
    							<div class="opBtn"><a href="javascript:;" class="dialog-sure">确定</a><a href="javascript:;" class="dialog-close">关闭</a></div>
    						</section>

    						<div class="clear"></div>
    					</div>
			
				
		
					
			
			
				
			</div>
			<div class="clear"></div>
		</div>
	</div>


	<!-- 底部 -->
	<div class="footer">
		<div class="footer-top">
			<div class="wrap">
				<div class="col_1_of_footer-top span_1_of_footer-top">
					<ul class="f_list">
						<li><img src="./images/f_icon.png" alt=""/><span class="delivery">Free delivery on all orders over £100*</span></li>
					</ul>
				</div>
				<div class="col_1_of_footer-top span_1_of_footer-top">
					<ul class="f_list">
						<li><img src="./images/f_icon1.png" alt=""/><span class="delivery">Customer Service :<span class="orange"> (800) 000-2587 (freephone)</span></span></li>
					</ul>
				</div>
				<div class="col_1_of_footer-top span_1_of_footer-top">
					<ul class="f_list">
						<li><img src="./images/f_icon2.png" alt=""/><span class="delivery">Fast delivery & free returns</span></li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="footer-middle">
			<div class="wrap">
				<div class="section group">


					<div class="clear"></div>
				</div>
			</div>
		</div>
		<div class="footer-bottom">
			<div class="wrap">
				<div class="section group">
					<div class="col_1_of_5 span_1_of_5">
						<h3 class="m_9">网球</h3>
						<ul class="sub_list">
							
						</ul>
					</div>
					<div class="col_1_of_5 span_1_of_5">
						<h3 class="m_9">网球拍</h3>
						<ul class="list1">
							<li><a href="">Basketball</a></li>
							
						</ul>
					</div>
					<div class="col_1_of_5 span_1_of_5">
						<h3 class="m_9">网球服装</h3>
						<ul class="list1">
							<li><a href="">Originals Shoes</a></li>
						
						</ul>
					</div>
					<div class="col_1_of_5 span_1_of_5">
						<h3 class="m_9">网球配件</h3>
						<ul class="list1">
							<li><a href="">Shirts</a></li>
							<li><a href="">Pants & Tights</a></li>
							<li><a href="">Shirts</a></li>
						</ul>
					</div>
					<div class="col_1_of_5 span_1_of_5">
						<h3 class="m_9">关于我们</h3>
						<ul class="list1">
							<li><a href="">联系电话：</a></li>
							<li><a href="">地址：</a></li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<div class="copy">
			<div class="wrap">
				<p>© 2019 | RFTennis &nbsp;</a></p> 
			</div>
		</div>
	</div>
	<!-- <script src="./jquery/jquery.min.js"></script> -->
	<script src="./js/carts.js" ></script>

		<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
		<script src="/static/js/jquery.js"></script>
	<script src="/static/js/vue.js"></script>
    <script src="/static/js/yi.toast.js"></script>
    <script>
  //网页加载完毕获取等级列表
	const vue = new Vue({
		el : "body>artical",//css选择器
		data : {
			
		},
		watch : {
			
			$("form").submit(function(evt){
	    		$("#submitBtn").prop("disabled",true);
	    		evt.preventDefault();
	    		this.query();
	    		
	    	})
			}
		},
		methods : {
			
			query : function(evt) {
				$.post("/order/add.do",$(this).serialize(),function(resp){
	    			if(resp.code!=="ok"){
	    				toast(resp.message);
	    				return;
	    			}
	    			alert("成功!");
	    			
	    		}).always(function(){
	    			$("#submitBtn").prop("disabled",false);
	    		})
			}
		}
		
	});
    </script>
</body>
</html>